<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .box {
      width: 440px;
      margin: 100px auto;
    }

    .box-th {
      overflow: hidden;
      width: 100%;
      background-color: #88ace6;
    }

    .box-th ul li {
      float: left;
      width: 90px;
      height: 20px;
      margin-right: 10px;
      padding: 5px;
      text-align: center;
    }

    .current {
      color: #fff;
      background-color: green;
    }

    .box-tb {
      margin-top: 20px;
    }

    .box-tb .item:nth-child(n+2) {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box-th">
      <ul>
        <li data-index="0" class="current">春</li>
        <li data-index="1">夏</li>
        <li data-index="2">秋</li>
        <li data-index="3">冬</li>
      </ul>
    </div>
    <div class="box-tb">
      <div class="item">
        hhh
      </div>
      <div class="item">
        aaa
      </div>
      <div class="item">
        jjj
      </div>
      <div class="item">
        sss
      </div>
    </div>
  </div>

  <script>
    var list = document.querySelector('.box-th').querySelectorAll('li');
    var items = document.querySelector('.box-tb').querySelectorAll('.item');
    for (var i = 0; i < list.length; i++) {
      list[i].onclick = function () {
        // 导航栏样式切换，排他算法
        for (var i = 0; i < list.length; i++) {
          list[i].className = '';
        }
        this.className = 'current';

        // 下面展示内容切换，排他算法
        var index = this.getAttribute('data-index');
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none';
        }
        items[index].style.display = 'block';
      }
    }
  </script>
</body>

</html>